const myCube = document.querySelector('.my-cube');
const myCubes = document.querySelectorAll('.my-cube>.cube');
const selectorCubes = document.querySelectorAll('.selector-cube>.cube');
for (let i = 0; i < 6; i++) {
    myCubes[i].style.cssText += `background-image: url(./img/${i+1}.png);`;
    selectorCubes[i].style.cssText += `background-image: url(./img/${i+1}.png);`;
}

selectorCubes.forEach((cube, idx) => {
    cube.addEventListener('click', function () {
        selectorCubes.forEach(ele => {
            ele.classList.remove('active-cube');
        });
        this.classList.add('active-cube');

        let transformStr = ``;
        switch (idx + 1) {
            case 1:
                transformStr = `transform: rotateX(0) rotateY(0) rotateZ(0);`
                break;
            case 2:
                transformStr = `transform: rotateX(0) rotateY(90deg) rotateZ(0);`
                break;
            case 3:
                transformStr = `transform: rotateX(90deg) rotateY(0) rotateZ(0);`
                break;
            case 4:
                transformStr = `transform: rotateX(0) rotateY(-90deg) rotateZ(0);`
                break;
            case 5:
                transformStr = `transform: rotateX(-90deg) rotateY(0) rotateZ(0);`
                break;
            case 6:
                transformStr = `transform: rotateX(-180deg) rotateY(0) rotateZ(0);`
                break;
            default:
                break;
        };

        myCube.style.cssText += transformStr;
    });
});

function reSize() {
    let clientWidth = document.documentElement.clientWidth;
    document.documentElement.style.fontSize = clientWidth / 37.5 + 'px';
}

window.addEventListener('resize', reSize, false);
reSize();